<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {
  getSumStudyNum,
  getSumDayStudyNum,
} from "@/api/system/college";
import { getToken } from "@/utils/auth";

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
       sumCount:0,
       courseNameList:[],
       courseCountList:[]
    }
  },

  created() {
    getSumDayStudyNum().then((response) => {
      console.log(response.data.sumCount);
        this.sumCount = response.data.sumCount;
        this.courseNameList = response.data.courseNameList;
        this.courseCountList = response.data.courseCountList;
        this.initChart();
      });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
              title : {
                show:true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
                text: '今日学习次数:'+this.sumCount, //主标题文本，'\n'指定换行
                x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                textAlign: 'left' ,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
                backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
                borderColor: '#ccc', //标题边框颜色,默认'#ccc'
                textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                    fontFamily: 'lighter',
                    fontSize: 24,
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                }
            },
            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                top: 70,
                bottom: 50
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                    
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '今日学习次数  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: this.courseNameList
                },
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '学习次数',
                    type: 'line',
                    smooth: true,
                    data: this.courseCountList
                }
            ]

        })
    }
  }
}
</script>
